<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataRyfh } from "@/api/search";
import { addOrUpdateRyfh } from "@/api/addOrUpdate";
import { postTableData } from "@/api/table";

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};

const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");

const editorRef10 = shallowRef();
const valueHtml10 = ref(
  `人均防护面积按XX㎡计算，总计需求面积XX㎡，现有面积XX㎡，差额面积XX㎡。具体情况如下：`
);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};

const editorRef11 = shallowRef();
const valueHtml11 = ref(
  `人均防护面积按XX㎡计算，总计需求面积XX平方千米，现有面积XX平方千米，差额面积XX平方千米。具体情况如下：`
);
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};

const editorRef12 = shallowRef();
const valueHtml12 = ref(
  `按疏散人口比例XX%计算，共需疏散XX人，目前疏散地域可接收XX人，能够完成人员防护任务。能够完成人员防护任务具体情况如下：`
);
const toolbarConfig12 = {};
const editorConfig12 = { placeholder: "请输入内容..." };
const mode12 = ref("default");
const handleCreated12 = (editor) => {
  editorRef12.value = editor; // 记录 editor 实例，重要！
};
const editorRef13 = shallowRef();
const valueHtml13 = ref(
  `预警需求：预警需求：空情预警信息系统需接入单位XX个，现已接入单位XX个，未接入单位XX个。具体情况如下：`
);
const toolbarConfig13 = {};
const editorConfig13 = { placeholder: "请输入内容..." };
const mode13 = ref("default");
const handleCreated13 = (editor) => {
  editorRef13.value = editor; // 记录 editor 实例，重要！
};

const editorRef14 = shallowRef();
const valueHtml14 = ref(
  `报知需求：警报器覆盖率需达到100%，现覆盖率XX%，差额XX%。具体情况如下：`
);
const toolbarConfig14 = {};
const editorConfig14 = { placeholder: "请输入内容..." };
const mode14 = ref("default");
const handleCreated14 = (editor) => {
  editorRef14.value = editor; // 记录 editor 实例，重要！
};

const editorRef15 = shallowRef();
const valueHtml15 = ref(
  `按预计城市人员受伤比例3.0%，重伤人口比例30.0%，轻伤人口比例70.0%，1名医护人员救护重伤人员数量标准为3人，1名医护人员救护轻伤人员数量标准为8人计算，需要医护人员数量XX人。具体情况如下：`
);
const toolbarConfig15 = {};
const editorConfig15 = { placeholder: "请输入内容..." };
const mode15 = ref("default");
const handleCreated15 = (editor) => {
  editorRef15.value = editor; // 记录 editor 实例，重要！
};

const editorRef16 = shallowRef();
const valueHtml16 = ref(
  `按疏散城市人口的XX%计算，共需客车（按70座计算）XX台次，现有XX台次，差额XX台次；需货车（按每台载重10.0吨，每人携带物品20.0kg计算）XX台次，现有XX台次，满足需求。具体情况如下：`
);
const toolbarConfig16 = {};
const editorConfig16 = { placeholder: "请输入内容..." };
const mode16 = ref("default");
const handleCreated16 = (editor) => {
  editorRef16.value = editor; // 记录 editor 实例，重要！
};

// 加载html
const initHtml = () => {
  searchDataRyfh({ m: "任务需求-任务需求" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "装备器材需求")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "物资保障需求")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "经费保障需求")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "核化保障需求")?.v || "";
    valueHtml10.value = data.find((x) => x.k === "防护工程需求")?.v || "";
    valueHtml11.value = data.find((x) => x.k === "掩蔽场所需求")?.v || "";
    valueHtml12.value = data.find((x) => x.k === "疏散地域需求")?.v || "";
    valueHtml13.value =
      data.find((x) => x.k === "空情预警信息系统需求清单")?.v || "";
    valueHtml14.value = data.find((x) => x.k === "警报系统需求清单")?.v || "";
    valueHtml15.value = data.find((x) => x.k === "医疗救护需求")?.v || "";
    valueHtml16.value = data.find((x) => x.k === "交通运力需求")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};
const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "主要计算专业队装备器材需求，具体需求参照“平战转换行动计划”第五节“相关保障”中的专业队装备器材保障标准。"
);
const valueHtml1 = ref(
  "主要估算生活物资、救灾物资、工程物资保障的需求，具体需求参照“平战转换行动计划”第五节“相关保障”中的生活物资、救灾物资、工程物资战储标准。"
);
const valueHtml2 = ref(
  "主要估算生活物资保障经费和抢险救灾行动保障经费。<br/>生活物资保障经费：按每人每天30元标准，城市人口XX万人，保障XX天，总计XX亿元预算。<br/>抢险救灾行动保障经费：按每人500元计算，共XX亿元预算。"
);
const valueHtml3 = ref(
  "核化洗消专业队按市、县（区）各级不少于XX支，每个专业队不少于XX人编组，并配套储备相应的核化洗消方舱及器材；核化检测专业队按市编组XX支，每个专业队不少于XX人编组，并配套相应的检测装备、器材和试剂。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateRyfh({
      m: "任务需求-任务需求",
      data: [
        {
          k: "装备器材需求",
          v: valueHtml.value,
        },
        {
          k: "物资保障需求",
          v: valueHtml1.value,
        },
        {
          k: "经费保障需求",
          v: valueHtml2.value,
        },
        {
          k: "核化保障需求",
          v: valueHtml3.value,
        },
        {
          k: "防护工程需求",
          v: valueHtml10.value,
        },
        {
          k: "掩蔽场所需求",
          v: valueHtml11.value,
        },
        {
          k: "疏散地域需求",
          v: valueHtml12.value,
        },
        {
          k: "空情预警信息系统需求清单",
          v: valueHtml13.value,
        },
        {
          k: "警报系统需求清单",
          v: valueHtml14.value,
        },
        {
          k: "医疗救护需求",
          v: valueHtml15.value,
        },
        {
          k: "交通运力需求",
          v: valueHtml16.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

// 防护工程需求清单
const fhgcList = ref([]);
const getFhgcData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "fanghugongchengxuqiuqingdan",
  }).then((res) => {
    if (res.code === 200) {
      fhgcList.value = res?.data || [];
    }
  });
};
// 掩蔽场所需求清单
const ybcsList = ref([]);
const getYbcsData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "zheyanchangsuoxuqiu",
  }).then((res) => {
    if (res.code === 200) {
      ybcsList.value = res?.data || [];
    }
  });
};
// 疏散地域需求清单
const ssdyList = ref([]);
const getSsdyData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "shusandiyuxuqiuqingdan",
  }).then((res) => {
    if (res.code === 200) {
      ssdyList.value = res?.data || [];
    }
  });
};
// 交通运力需求清单
const jtylList = ref([]);
const getJtylData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "jiaotongyunlixuqiuqingdan",
  }).then((res) => {
    if (res.code === 200) {
      jtylList.value = res?.data || [];
    }
  });
};
// 空情预警信息系统需求清单
const ylqkList = ref([]);
const getYlqkData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "kongqingyujingxinxinenglixuqiu",
  }).then((res) => {
    if (res.code === 200) {
      ylqkList.value = res?.data || [];
    }
  });
};
// 警报系统需求清单
const jbxqList = ref([]);
const getJbxqData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "jingbaoxuqiuqingdan",
  }).then((res) => {
    if (res.code === 200) {
      jbxqList.value = res?.data || [];
    }
  });
};
// 医护人员需求统计
const yhryList = ref([]);
const getYhryData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "yihurenyuanpeibeibiaozhun",
  }).then((res) => {
    if (res.code === 200) {
      yhryList.value = res?.data || [];
    }
  });
};

onMounted(async () => {
  await initHtml();
  await getFhgcData();
  await getYbcsData();
  // await getSsdyData();
  await getJtylData();
  await getYlqkData();
  await getJbxqData();
  await getYhryData();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
  if (editorRef12.value) editorRef12.value.destroy();
  if (editorRef13.value) editorRef13.value.destroy();
  if (editorRef14.value) editorRef14.value.destroy();
  if (editorRef15.value) editorRef15.value.destroy();
  if (editorRef16.value) editorRef16.value.destroy();
});
// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};
const tableData = ref([
  {
    c1: 1,
    c2: city,
    cc: "长沙",
    c3: "x",
  },
  {
    c1: 2,
    c2: city,
    cc: "武汉",
    c3: "x",
  },
  {
    c1: 3,
    c2: city,
    cc: "武汉",
    c3: "x",
  },
]);

// 合计占2单元格
const spanMethod = ({ row, column, rowIndex, columnIndex, length }) => {
  if (columnIndex === 0) {
    if (length > 1 && rowIndex === length - 1 && row.jd_name === "合计") {
      return {
        display: "none",
      };
    }
  } else if (columnIndex === 1) {
    if (row.jd_name === "合计") return [1, 2];
  }
};
</script>
<template>
  <div class="">
    <FirstTitle name="防护工程需求" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>
    <div class="text-center top-15">{{ city }}防护工程需求清单（单位:㎡）</div>
    <el-table
      id="table"
      :data="fhgcList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: fhgcList.length,
          })
      "
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="rfgcnlbzmj" label="需求面积" />
      <el-table-column prop="rfgcxymj" label="现有面积" />
      <el-table-column prop="rfgcxqmj" label="差额面积" />
    </el-table>

    <FirstTitle name="掩蔽场所需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>
    <div class="text-center top-15">{{ city }}掩蔽场所需求清单（单位:㎡）</div>
    <el-table
      id="table"
      :data="ybcsList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="ybcsnlbzmj" label="需求面积" />
      <el-table-column prop="xyybcsmj" label="现有面积" />
      <el-table-column prop="ybcsnlxqmj" label="差额面积" />
    </el-table>

    <FirstTitle name="疏散地域需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef12"
        :defaultConfig="toolbarConfig12"
        :mode="mode12"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml12"
        :defaultConfig="editorConfig12"
        :mode="mode12"
        @onCreated="handleCreated12"
      />
    </div>

    <FirstTitle name="交通运力需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef16"
        :defaultConfig="toolbarConfig16"
        :mode="mode16"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml16"
        :defaultConfig="editorConfig16"
        :mode="mode16"
        @onCreated="handleCreated16"
      />
    </div>

    <div class="text-center top-15">
      {{ city }}交通运力需求清单（单位:台次）
    </div>
    <el-table
      id="table"
      :data="jtylList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区域" />
      <el-table-column prop="c3" label="客车">
        <el-table-column prop="xykcsl" label="需求数" />
        <el-table-column prop="k_car_count" label="现有数" />
        <el-table-column prop="k_diff" label="差额数" />
      </el-table-column>
      <el-table-column prop="c3" label="货车">
        <el-table-column prop="xyhcsl" label="需求数" />
        <el-table-column prop="h_car_count" label="现有数" />
        <el-table-column prop="h_kiff" label="差额数" />
      </el-table-column>
    </el-table>

    <FirstTitle name="预警报知需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef13"
        :defaultConfig="toolbarConfig13"
        :mode="mode13"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml13"
        :defaultConfig="editorConfig13"
        :mode="mode13"
        @onCreated="handleCreated13"
      />
    </div>

    <div class="text-center top-15">{{ city }}空情预警信息系统需求清单</div>
    <el-table
      id="table"
      :data="ylqkList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="单位" />
      <el-table-column prop="quantity" label="需引接空情预警信息系统套数" />
    </el-table>
    <FirstTitle name="报知需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef14"
        :defaultConfig="toolbarConfig14"
        :mode="mode14"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml14"
        :defaultConfig="editorConfig14"
        :mode="mode14"
        @onCreated="handleCreated14"
      />
    </div>
    <div class="text-center top-15">{{ city }}警报系统需求清单</div>
    <el-table
      id="table"
      :data="jbxqList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="单位" />
      <el-table-column prop="quantity" label="现有数量" />
      <el-table-column prop="cityCoverageRate" label="覆盖率" />
      <el-table-column prop="diff" label="覆盖率差额" />
    </el-table>

    <FirstTitle name="医疗救护需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef15"
        :defaultConfig="toolbarConfig15"
        :mode="mode15"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml15"
        :defaultConfig="editorConfig15"
        :mode="mode15"
        @onCreated="handleCreated15"
      />
    </div>
    <div class="text-center top-15">{{ city }}医护人员配备标准一览表</div>
    <el-table
      id="table"
      :data="yhryList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区域" />
      <el-table-column prop="csrksl" label="城市人口（万人)" />
      <el-table-column prop="yjssbl" label="预计受伤比例（%）" />
      <el-table-column prop="yjssrs" label="受伤（人）" />
      <el-table-column prop="yjzsbl" label="预计重伤比例（人）" />
      <el-table-column prop="yjzsrs" label="重伤（人）" />
      <el-table-column prop="yjqsbl" label="预计轻伤比例（人）" />
      <el-table-column prop="yjqsrs" label="轻伤（人）" />
      <el-table-column prop="zsyyhb" label="重伤与医护比" />
      <el-table-column prop="qsyyhb" label="轻伤与医护比" />
      <el-table-column prop="xyyhrssl" label="需要医护人数" />
    </el-table>

    <FirstTitle name="装备器材需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="物资保障需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="经费保障需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="核化保障需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>